<template>
  <!-- 玩家角色列表 -->
  <div class="user-list">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>玩家管理</el-breadcrumb-item>
      <el-breadcrumb-item>玩家角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-row>
        <el-col :span="8" style="padding: 10px;">
          <div class="grid-content search-container">
            <el-input
              placeholder="请输入玩家角色名"
              v-model.trim="searchCont"
              clearable
              class="search-input"
              @clear="searchClear"
            >
            </el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="searchUser"
            ></el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 用户列表模板 -->
      <div class="user-table">
        <el-table :data="userData" stripe border>
          <el-table-column type="index" label="#" width="48"></el-table-column>
          <el-table-column
            prop="player_username"
            label="所属账号"
            min-width="120"
          ></el-table-column>
          <el-table-column prop="name" label="角色名称" min-width="100">
          </el-table-column>
          <el-table-column label="性别">
            <template slot-scope="props">
              <div v-if="props.row.gender === 0">
                男
              </div>
              <div v-else>
                女
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="level" label="等级"> </el-table-column>
          <el-table-column prop="exp" label="经验值" min-width="100">
          </el-table-column>
          <el-table-column prop="str" label="力量"> </el-table-column>
          <el-table-column prop="dex" label="敏捷"> </el-table-column>
          <el-table-column prop="int" label="智力"> </el-table-column>
          <el-table-column prop="luk" label="运气"> </el-table-column>
          <el-table-column prop="hp" label="当前HP"> </el-table-column>
          <el-table-column prop="mp" label="当前MP"> </el-table-column>
          <el-table-column prop="maxhp" label="最大HP"> </el-table-column>
          <el-table-column prop="maxmp" label="最大MP"> </el-table-column>
          <el-table-column prop="meso" label="金币"> </el-table-column>
          <el-table-column prop="job" label="职业"> </el-table-column>

          <el-table-column prop="ap" label="能力点"> </el-table-column>
          <el-table-column prop="sp" label="技能点"> </el-table-column>
          <el-table-column prop="map" label="所在地图"> </el-table-column>
          <el-table-column label="婚姻状况">
            <template slot-scope="props">
              <div>
                <el-tag
                  type="danger"
                  size="mini"
                  effect="dark"
                  v-if="props.row.married === 1"
                  >已婚</el-tag
                >
                <el-tag
                  type="info"
                  size="mini"
                  effect="dark"
                  v-if="props.row.married === 0"
                  >未婚</el-tag
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="角色创建时间" min-width="150">
            <template slot-scope="props">
              <div>
                {{ props.row.createdate || formatTime('yyyy-MM-dd hh:mm:ss') }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit"
                @click="editUser(scope.row.id)"
              ></el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="deleteUser(scope.row.id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 添加玩家角色弹出层 -->
    <el-dialog
      title="添加玩家角色"
      :visible.sync="dialogFormVisible"
      class="add-role-dialog"
    >
      <el-form
        :model="addUserForm"
        :rules="addUserFormRules"
        ref="addUserForm"
        class="demo-ruleForm"
        :label-position="labelPosition"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="addUserForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addUserForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="账户点券" prop="mPoints">
          <el-input v-model="addUserForm.mPoints"></el-input>
        </el-form-item>
        <el-form-item label="账户抵用券" prop="vPoints">
          <el-input v-model="addUserForm.vPoints"></el-input>
        </el-form-item>
        <el-form-item label="VIP等级：" prop="vip">
          <el-col :span="24">
            <el-col :span="12">
              <el-select v-model="addUserForm.vip" placeholder="请选择">
                <el-option
                  :label="item.vip_name"
                  :value="item.vip_level"
                  v-for="item in vipList"
                  :key="item.id"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-form-item label="帐号状态" prop="status">
                <el-select v-model="addUserForm.status" placeholder="请选择">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in statusList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="info" @click="addUserReset('addUserForm')"
            >重置</el-button
          >
          <el-button type="primary" @click="addUserSubmit('addUserForm')"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 编辑玩家角色弹出层 -->
    <el-dialog
      title="编辑玩家角色"
      :visible.sync="dialogEditFormVisible"
      class="edit-user-dialog"
    >
      <el-form
        :model="editUserForm"
        :rules="addUserFormRules"
        ref="editUserForm"
        class="demo-ruleForm"
        :label-position="labelPosition"
        label-width="100px"
        inline
      >
        <el-form-item label="所属账号" prop="player_username">
          <el-input
            v-model="editUserForm.player_username"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="editUserForm.name"></el-input>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input v-model.number="editUserForm.level"></el-input>
        </el-form-item>
        <el-form-item label="经验值" prop="exp">
          <el-input v-model.number="editUserForm.exp"></el-input>
        </el-form-item>
        <el-form-item label="力量" prop="str">
          <el-input v-model.number="editUserForm.str"></el-input>
        </el-form-item>
        <el-form-item label="敏捷" prop="dex">
          <el-input v-model.number="editUserForm.dex"></el-input>
        </el-form-item>
        <el-form-item label="智力" prop="int">
          <el-input v-model.number="editUserForm.int"></el-input>
        </el-form-item>
        <el-form-item label="运气" prop="luk">
          <el-input v-model.number="editUserForm.luk"></el-input>
        </el-form-item>
        <el-form-item label="当前HP" prop="hp">
          <el-input v-model.number="editUserForm.hp"></el-input>
        </el-form-item>
        <el-form-item label="当前MP" prop="mp">
          <el-input v-model.number="editUserForm.mp"></el-input>
        </el-form-item>
        <el-form-item label="最大HP" prop="maxhp">
          <el-input v-model.number="editUserForm.maxhp"></el-input>
        </el-form-item>
        <el-form-item label="最大MP" prop="maxmp">
          <el-input v-model.number="editUserForm.maxmp"></el-input>
        </el-form-item>
        <el-form-item label="金币" prop="meso">
          <el-input v-model.number="editUserForm.meso"></el-input>
        </el-form-item>
        <el-form-item label="技能点" prop="sp">
          <el-input v-model.number="editUserForm.sp"></el-input>
        </el-form-item>
        <el-form-item label="能力点" prop="ap">
          <el-input v-model.number="editUserForm.ap"></el-input>
        </el-form-item>
        <el-form-item label="职业ID" prop="job">
          <el-input v-model.number="editUserForm.job"></el-input>
        </el-form-item>
        <el-form-item label="所在地图ID" prop="map">
          <el-input v-model.number="editUserForm.map"></el-input>
        </el-form-item>
        <div style="text-align: center">
          <el-form-item style="text-align: right">
            <el-button @click="dialogEditFormVisible = false">取消</el-button>
            <el-button type="primary" @click="editUserSubmit('editUserForm')"
              >确定</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>

    <!-- 分配角色弹出层 -->
    <el-dialog
      title="分配角色"
      :visible.sync="dialogRoleFormVisible"
      class="assign-role-dialog"
      @close="editUserForm.role = ''"
    >
      <el-form
        :model="editUserForm"
        ref="assignRoleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="当前的用户：">
          <span v-text="editUserForm.username"></span>
        </el-form-item>
        <el-form-item label="当前的角色：">
          <span v-text="editUserForm.role"></span>
        </el-form-item>
        <el-form-item label="分配新角色：" prop="region">
          <el-select v-model="editUserForm.roleId" placeholder="请选择">
            <el-option
              :label="item.roleName"
              :value="item.id"
              v-for="item in roleList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button @click="dialogRoleFormVisible = false">取消</el-button>
          <el-button type="primary" @click="assignRoleSubmit()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    // 用户名正则
    // var userRule = /^(?=.*[0-9])(?=.*[a-zA-Z])(.{4,16})$/;
    // var checkUsername = (rule, value, callback) => {
    //   if (!value.trim()) {
    //     callback(new Error('请输入用户名'));
    //   } else {
    //     if (!userRule.test(value)) {
    //       callback(new Error('用户名长度在1-8位之间，需要同时包含字母和数字'));
    //     } else {
    //       callback();
    //     }
    //   }
    // };
    // 密码正则
    var pwdRule = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,16}$/;
    var checkPassword = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('请输入密码'));
      } else {
        if (!pwdRule.test(value)) {
          callback(
            new Error(
              '密码长度在6-16个字符之间，至少包含数字跟字母，可以有字符'
            )
          );
        } else {
          callback();
        }
      }
    };
    // 邮箱正则
    var emailRule = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    var checkEmail = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('请输入邮箱'));
      } else {
        if (!emailRule.test(value)) {
          callback(new Error('请输入正确的邮箱格式，例如：123456@qq.com'));
        } else {
          callback();
        }
      }
    };
    // 手机号正则
    var telRule = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
    var checkTel = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('请输入手机号'));
      } else {
        if (!telRule.test(value)) {
          callback(new Error('请输入正确的手机号格式'));
        } else {
          callback();
        }
      }
    };

    // 数值验证
    var checkNum = (rule, value, callback) => {
      if (value < 0) {
        callback(new Error('请输入大于等于0的整数'));
      } else {
        callback();
      }
    };

    return {
      searchCont: '', // 搜索内容
      userData: [], // 用户数据
      currentPage: 1, // 分页器当前页码
      pageTotal: 0, // 分页器总条数
      pageSize: 5, // 每页显示条数
      pageSizes: [5, 10, 15, 20], // 可选择的每页条数
      dialogFormVisible: false, // 控制添加用户弹出层显示隐藏
      dialogEditFormVisible: false, // 控制编辑用户弹出层显示隐藏
      dialogRoleFormVisible: false, // 控制角色分配弹出层
      labelPosition: 'left',
      loadingConfig: {
        // 加载层参数配置
        target: '.add-user-dialog',
        fullscreen: true,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)',
        text: '拼命加载中'
      },
      addUserForm: {
        // 添加用户表单的数据
        username: '',
        password: '',
        email: '',
        mobile: '',
        mPoints: 0,
        vPoints: 0,
        vip: 0,
        status: 1
      },
      roleList: [],
      addUserFormRules: {
        player_username: [
          { required: true, trigger: 'blur', message: '请输入所属账号' }
        ],
        name: [
          { required: true, trigger: 'blur', message: '请输入角色名' },
          { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
        ],
        level: [
          { required: true, trigger: 'blur', message: '请输入等级' },
          { validator: checkNum, trigger: 'blur' }
        ],
        exp: [
          { required: true, trigger: 'blur', message: '请输入经验值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        str: [
          { required: true, trigger: 'blur', message: '请输入属性值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        dex: [
          { required: true, trigger: 'blur', message: '请输入属性值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        int: [
          { required: true, trigger: 'blur', message: '请输入属性值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        luk: [
          { required: true, trigger: 'blur', message: '请输入属性值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        hp: [
          { required: true, trigger: 'blur', message: '请输入属性值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        mp: [
          { required: true, trigger: 'blur', message: '请输入属性值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        maxhp: [
          { required: true, trigger: 'blur', message: '请输入属性值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        maxmp: [
          { required: true, trigger: 'blur', message: '请输入属性值' },
          { validator: checkNum, trigger: 'blur' }
        ],
        meso: [
          { required: true, trigger: 'blur', message: '请输入金币数量' },
          { validator: checkNum, trigger: 'blur' }
        ],
        job: [
          { required: true, trigger: 'blur', message: '请输入职业ID' },
          { validator: checkNum, trigger: 'blur' }
        ],
        map: [
          { required: true, trigger: 'blur', message: '请输入所在地图' },
          { validator: checkNum, trigger: 'blur' }
        ],
        sp: [
          { required: true, trigger: 'blur', message: '请输入技能点数' },
          { validator: checkNum, trigger: 'blur' }
        ],
        ap: [
          { required: true, trigger: 'blur', message: '请输入能力点数' },
          { validator: checkNum, trigger: 'blur' }
        ],
        password: [
          { validator: checkPassword, required: true, trigger: 'blur' }
        ],
        email: [{ validator: checkEmail, required: true, trigger: 'blur' }],
        mobile: [{ validator: checkTel, required: true, trigger: 'blur' }],
        mPoints: [
          { required: true, message: '请输入点券数', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        vPoints: [
          { required: true, message: '请输入抵用券数', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        vip: [{ required: true, message: '请选择VIP等级', trigger: 'blur' }],
        status: [{ required: true, message: '请选择帐号状态', trigger: 'blur' }]
      },
      editUserForm: {
        // 编辑用户表单的数据
      },
      // VIP信息列表
      vipList: [],
      // 账号状态
      statusList: [
        {
          id: 1,
          value: 1,
          label: '正常'
        },
        {
          id: 2,
          value: 0,
          label: '封禁'
        }
      ]
    };
  },

  methods: {
    // 获取玩家角色数据
    getUserData () {
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      this.$axios
        .get('/playerRoles', {
          params: {
            search: this.searchCont, // 请求的搜索用户名关键词
            pagenum: this.currentPage, // 请求的当前页码
            pagesize: this.pageSize // 请求的每页显示条数
          }
        })
        .then(res => {
          if (res.status === 0) {
            // 处理数据
            // res.data.forEach(item => {
            //   if (item.player_status === 1) {
            //     item.player_status = true;
            //   } else {
            //     item.player_status = false;
            //   }
            // });

            // 设置分页器总条数
            this.pageTotal = res.total;
            // 设置当前页
            this.currentPage = res.pagenum;
            // 设置用户数据
            this.userData = res.data;
            // 判断当前页是否为空
            if (this.pageTotal === (this.currentPage - 1) * this.pageSize) {
              if (this.currentPage - 1 < 1) {
                this.handleCurrentChange(1);
              } else {
                this.handleCurrentChange(this.currentPage - 1);
              }
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    getVipData () {
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      this.$axios
        .get('/vip/info')
        .then(res => {
          if (res.status === 0) {
            // 设置VIP数据
            this.vipList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    handleSizeChange (val) {
      // 切换每页条数重新获取用户数据
      this.pageSize = val;
      this.getUserData();
    },
    handleCurrentChange (val) {
      // 切换页码时重新获取用户数据
      this.currentPage = val;
      this.getUserData();
    },
    addUserBtn () {
      // 添加用户按钮触发弹出层
      this.dialogFormVisible = true;
      // 获取vip数据
      this.getVipData();
    },
    addUserSubmit (formName) {
      // 添加用户表单提交
      this.$refs[formName].validate(valid => {
        if (valid) {
          var loading = this.$loading.service(this.$store.state.loadingConfig);
          this.$axios
            .post('/addPlayer', this.addUserForm)
            .then(res => {
              if (res.status === 0) {
                // 打开消息弹窗
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                // 重置添加用户表单
                this.$refs[formName].resetFields();
                // 关闭弹出层
                this.dialogFormVisible = false;
                // 重新渲染用户列表
                this.getUserData();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            })
            .finally(() => {
              // 关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        } else {
          return false;
        }
      });
    },
    addUserReset (formName) {
      // 重置添加用户表单
      this.$refs[formName].resetFields();
    },
    searchUser () {
      // 搜索用户
      this.getUserData();
    },
    searchClear () {
      // 清除搜索框后重新渲染默认用户列表
      this.searchCont = '';
      this.currentPage = 1;
      this.getUserData();
    },
    getUserInfo (id) {
      this.dialogEditFormVisible = true;
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      // 根据ID查找用户信息
      this.$axios
        .get('/players/' + id)
        .then(res => {
          if (res.status === 0) {
            this.editUserForm.id = res.data.id;
            this.editUserForm.username = res.data.player_username;
            this.editUserForm.email = res.data.player_email;
            this.editUserForm.mobile = res.data.player_mobile;
            this.editUserForm.mPoints = res.data.player_mPoints;
            this.editUserForm.vPoints = res.data.player_vPoints;
            this.editUserForm.vip = res.data.vip;
            this.editUserForm.status = res.data.player_status;
          } else {
            // 提示错误信息
            this.$message.error(res.msg);
            this.dialogEditFormVisible = false;
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
          this.dialogEditFormVisible = false;
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    editUser (id) {
      // 编辑玩家角色

      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      // 根据ID查找用户信息
      this.$axios
        .get('/playerRoles/' + id)
        .then(res => {
          if (res.status === 0) {
            this.editUserForm = res.data;
            this.dialogEditFormVisible = true;
          } else {
            // 提示错误信息
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    editUserSubmit (formName) {
      // 验证信息格式
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 打开加载层
          var loading = this.$loading.service(this.$store.state.loadingConfig);
          // 编辑用户提交
          this.$axios
            .put('/playerRoles/' + this.editUserForm.id, this.editUserForm)
            .then(res => {
              if (res.status === 0) {
                // 提示提交成功信息
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                // 关闭编辑用户弹出层
                this.dialogEditFormVisible = false;
                // 重新渲染用户列表
                this.getUserData();
              } else {
                // 提示错误信息
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
              this.dialogEditFormVisible = false;
            })
            .finally(() => {
              // 关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        } else {
          return false;
        }
      });
    },
    modifyUserState (obj) {
      // 修改用户状态
      // 打开加载层
      var loading = this.$loading.service(this.$store.state.loadingConfig);
      this.$axios
        .put('/switchPlayer/' + obj.id, {
          playerStatus: obj.player_status
        })
        .then(res => {
          if (res.status === 0) {
            // 提示成功信息
            this.$message({
              message: res.msg,
              type: 'success'
            });
          } else {
            // 提示失败信息
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          // 请求失败
          this.$message.error(error);
        })
        .finally(() => {
          // 关闭加载层
          this.$nextTick(() => {
            loading.close();
          });
        });
    },
    deleteUser (id) {
      // 根据ID删除用户

      // 调用确认弹框
      this.$confirm('此操作将永久删除该用户，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 打开加载层
          var loading = this.$loading.service(this.$store.state.loadingConfig);
          this.$axios
            .delete('/players/' + id)
            .then(res => {
              if (res.status === 0) {
                // 提示删除成功消息
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                // 重新渲染用户列表
                this.getUserData();
              } else {
                // 提示失败信息
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            })
            .finally(() => {
              // 关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    assignRole (id) {
      // 获取用户信息
      this.getUserInfo(id, this.getUserRole.bind(this));
      // 获取角色列表
      this.getRoleList();
      // 打开角色权限弹窗
      this.dialogRoleFormVisible = true;
    },
    assignRoleSubmit () {
      // 打开加载层
      var addUserLoading = this.$loading.service(this.loadingConfig);
      // 分配角色权限提交
      this.$axios
        .put('/users/' + this.editUserForm.id + '/role', {
          rid: this.editUserForm.roleId
        })
        .then(res => {
          if (res.status === 200) {
            // 关闭加载层
            addUserLoading.close();
            // 提示成功消息
            this.$message.success(res.msg);
            // 关闭弹出层
            this.dialogRoleFormVisible = false;
            // 重新渲染用户列表
            this.getUserData();
          } else {
            // 关闭加载层
            addUserLoading.close();
            // 提示错误消息
            this.$message.error(res.msg);
          }
        });
    },
    getRoleList () {
      // 获取角色列表
      this.$axios.get('/roles').then(res => {
        if (res.status === 200) {
          this.roleList = res;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getUserRole () {
      // 根据角色ID查询角色
      return this.$axios.get('/roles/' + this.editUserForm.roleId).then(res => {
        if (res.status === 200) {
          this.editUserForm.role = res.roleName;
          // 执行回调函数
          // if (cb) {
          //     cb();
          // }
        } else {
          this.editUserForm.roleId = null;
          this.editUserForm.role = '';
          this.$message.error(res.msg);
        }
      });
    }
  },
  mounted () {
    // 模板挂在完成后获取用户数据
    this.getUserData();
  }
};
</script>
<style lang="less" scoped></style>
